<template>
  <el-button
    :type="type === 'custom' ? '' : type"
    :class="[
      'lp-button',
      `lp-button--${shape}`,
      { 'is-block': block }
    ]"
    :style="buttonStyle"
    :size="size"
  >
    {{ text }}
  </el-button>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  text: { type: String, default: '按钮' },
  type: { type: String, default: 'primary' },
  backgroundColor: { type: String, default: '' },
  textColor: { type: String, default: '' },
  borderColor: { type: String, default: '' },
  shape: { type: String, default: 'default' },
  size: { type: String, default: 'default' },
  block: { type: Boolean, default: false }
})

const buttonStyle = computed(() => {
  if (props.type !== 'custom') return {}
  
  return {
    backgroundColor: props.backgroundColor,
    color: props.textColor,
    borderColor: props.borderColor,
    '--el-button-hover-bg-color': props.backgroundColor,
    '--el-button-hover-text-color': props.textColor,
    '--el-button-hover-border-color': props.borderColor,
    '--el-button-active-bg-color': props.backgroundColor,
    '--el-button-active-text-color': props.textColor,
    '--el-button-active-border-color': props.borderColor
  }
})
</script>

<style scoped>
.lp-button {
  transition: all 0.3s;
}

.lp-button--round {
  border-radius: 20px;
}

.lp-button--circle {
  padding: 12px;
  border-radius: 50%;
  aspect-ratio: 1;
}

.is-block {
  display: block;
  width: 100%;
}
</style> 